<template>
  <div class="moreOperations">
    <van-nav-bar title="公司员工管理" left-arrow @click-left="backMinePage">
      <template #right>
        <van-icon style="margin-right: 20px" name="search" size="20"
                  @click="searchBoxShow = !searchBoxShow; toClearKeyWord(!!searchParams.keyword)"
        />
        <van-icon name="ellipsis" size="18" @click="showOverlay = true" />
      </template>
    </van-nav-bar>

    <van-search
      v-show="searchBoxShow"
      v-model="searchParams.keyword"
      placeholder="请输入企业名搜索"
      show-action
      shape="round"
      @search="onSearch"
      @clear="toClearKeyWord"
    >
      <div slot="action" @click="onSearch">搜索</div>
    </van-search>

    <van-overlay :show="showOverlay" @click="showOverlay = false" class-name="over_layer">
      <van-cell-group class="layer">
        <van-cell value="新建子账号" @click="toDetail(1)" />
        <van-cell value="电话联系" />
      </van-cell-group>
    </van-overlay>

    <!-- card -->
    <div>
      <management-item v-for="(item, index) in 3" :key="index"></management-item>
      <van-pagination
        v-show="total > 0"
        style="margin: 10px 0"
        v-model="searchParams.pageIndex"
        :total-items="total"
        :items-per-page="searchParams.pageSize"
        @change="handlePaginationChange"
      >
        <template #prev-text>
          <van-icon name="arrow-left" />
        </template>
        <template #next-text>
          <van-icon name="arrow" />
        </template>
        <template #page="{ text }">{{ text }}</template>
      </van-pagination>
    </div>

  </div>
</template>

<script>
import ManagementItem from '../../../components/comStaffManagementItem'
import {Toast} from "vant";
export default {
  name: 'companyStaffManagement',
  components: {
    ManagementItem
  },
  data() {
    return {
      showOverlay: false,
      total: '',
      searchBoxShow: false,
      // 检索参数
      searchParams: {
        keyword: '', // 搜索关键字
        pageIndex: 1, // 当前页
        pageSize: 10, // 每页显示条数
        // 根据需求，添加其他参数
      },

    }
  },
  methods: {
    // 1--新建账号，2--查看账号
    toDetail(index) {
      this.$router.push({
        path: `/companyNewAccount/${index}`
      })
    },

    handlePaginationChange(pageIndex){
      this.searchParams.pageIndex = pageIndex;
      // this._getJobList()
    },
    onSearch() {
      this.searchParams.pageIndex = 1
      if(this.searchParams.keyword.trim()){
        // this._getJobList();
      } else {
        Toast('请先输入！');
      }
    },

    toClearKeyWord(isQuery = true){
      if(!isQuery){
        return null
      }
      this.searchParams.keyword = '';
      this.searchParams.pageIndex = 1
      this.$nextTick(() => {
        // this._getJobList()
      })
    },

    backMinePage(){
      localStorage.removeItem('tabItemIndex_myCompany');
      this.$router.push('/mine');
    },
  }
}
</script>

<style scoped lang="scss">
.over_layer {
  margin-top: 46px;
  height: 100%;
  .layer {
    width: 40%;
    font-size: 14px;
    position: absolute;
    right: 0;
    z-index: 2;
  }
}
.my-swipe {
  width: 100%;
  height: 200px;
  overflow: hidden;
}
</style>
